<template>
  <div class="info">
    <h3>基本信息</h3>
    <el-row gutter="15">
      <el-col :span="12">
        <el-form-item label="老人姓名" prop="name">
          <el-input v-model="formData.name" :readonly="type === 'read'" :style="{ width: '100%' }" clearable
                    placeholder="请输入老人姓名" type="text"/>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="身份证号" prop="idCardNo">
          <el-input v-model="formData.idCardNo" :readonly="type === 'read'" :style="{ width: '100%' }" clearable
                    placeholder="请输入身份证号" type="text"/>
        </el-form-item>
      </el-col>

    </el-row>
    <el-row gutter="15">
      <el-col :span="12">
        <el-form-item label="出生日期" prop="birthday">
          <el-date-picker v-model="formData.birthday" :readonly="type === 'read'" :style="{ width: '100%' }"
                          clearable format="YYYY-MM-DD" placeholder="请选择出生日期"
                          value-format="YYYY-MM-DD"/>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="年龄" prop="age">
          <el-input v-model="formData.age" :readonly="type === 'read'" :style="{ width: '100%' }" clearable
                    placeholder="请输入年龄" type="text"/>
        </el-form-item>
      </el-col>

    </el-row>
    <el-row gutter="15">
      <el-col :span="12">
        <el-form-item label="性别" prop="sex">
          <el-radio-group v-model="formData.sex" :readonly="type === 'read'" size="default">
            <el-radio v-for="(item, index) in sexOptions" :key="index" :disabled="item.disabled"
                      :label="item.value">{{ item.label }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="联系方式" prop="phone">
          <el-input v-model="formData.phone" :readonly="type === 'read'" :style="{ width: '100%' }" clearable
                    placeholder="请输入联系方式" type="text"/>
        </el-form-item>
      </el-col>

    </el-row>
    <el-row gutter="15">
      <el-col :span="12">
        <el-form-item label="家庭住址" prop="address">
          <el-input v-model="formData.address" :autosize="{ minRows: 4, maxRows: 4 }" :readonly="type === 'read'"
                    :style="{ width: '100%' }" placeholder="请输入家庭住址"
                    type="textarea"/>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="一寸照片" prop="image">
          <el-image v-if="type === 'read'" :src="formData.image" style="width: 100px; height: 100px"/>
          <el-upload v-else ref="image" :action="imageAction" :before-upload="imageBeforeUpload"
                     :file-list="imagefileList"
                     :headers="headers" :on-remove="() => handleRemove('image')"
                     :on-success="(res) => handleSuccess(res, 'image')" list-type="picture">
            <el-button icon="el-icon-upload" size="small" type="primary">点击上传</el-button>
          </el-upload>
        </el-form-item>
      </el-col>

    </el-row>
    <el-row gutter="15">
      <el-col :span="12">
        <el-form-item label="身份证人像面" prop="idCardPortraitImg">
          <el-image v-if="type === 'read'" :src="formData.idCardPortraitImg"
                    style="width: 100px; height: 100px"/>
          <el-upload v-else ref="idCardPortraitImg" :action="idCardPortraitImgAction"
                     :before-upload="idCardPortraitImgBeforeUpload" :file-list="idCardPortraitImgfileList"
                     :headers="headers"
                     :on-remove="() => handleRemove('idCardPortraitImg')"
                     :on-success="(res) => handleSuccess(res, 'idCardPortraitImg')"
                     list-type="picture">
            <el-button icon="el-icon-upload" size="small" type="primary">点击上传</el-button>
          </el-upload>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="身份证国徽面" prop="idCardNationalEmblemImg">
          <el-image v-if="type === 'read'" :src="formData.idCardNationalEmblemImg"
                    style="width: 100px; height: 100px"/>
          <el-upload v-else ref="idCardNationalEmblemImg" :action="idCardNationalEmblemImgAction"
                     :before-upload="idCardNationalEmblemImgBeforeUpload" :file-list="idCardNationalEmblemImgfileList"
                     :headers="headers"
                     :on-remove="() => handleRemove('idCardNationalEmblemImg')"
                     :on-success="(res) => handleSuccess(res, 'idCardNationalEmblemImg')"
                     list-type="picture">
            <el-button icon="el-icon-upload" size="small" type="primary">点击上传</el-button>
          </el-upload>
        </el-form-item>
      </el-col>

    </el-row>
  </div>
</template>
<script setup>
import {ElMessage} from 'element-plus'
import {getToken} from '@/utils/auth'

const formRef = ref()

const headers = {
  Authorization: 'Bearer ' + getToken()
}
const data = reactive({
  formData: {
    name: undefined,
    idCardNo: undefined,
    birthday: null,
    age: undefined,
    sex: 0,
    phone: undefined,
    address: undefined,
    image: null,
    idCardPortraitImg: null,
    idCardNationalEmblemImg: null,
  },
  rules: {
    name: [{
      required: true,
      message: '请输入老人姓名',
      trigger: 'blur'
    }],
    idCardNo: [{
      required: true,
      message: '请输入身份证号',
      trigger: 'blur'
    }],
    birthday: [{
      required: true,
      message: '请选择出生日期',
      trigger: 'change'
    }],
    age: [{
      required: true,
      message: '请输入年龄',
      trigger: 'blur'
    }],
    sex: [{
      required: true,
      message: '性别不能为空',
      trigger: 'change'
    }],
    phone: [{
      required: true,
      message: '请输入联系方式',
      trigger: 'blur'
    }],
    address: [{
      required: true,
      message: '请输入家庭住址',
      trigger: 'blur'
    }],
  }
})

const {
  formData,
  rules
} = toRefs(data)

const sexOptions = ref([{
  "label": "男",
  "value": 1
}, {
  "label": "女",
  "value": 0
}])

const imageAction = ref('/dev-api/common/upload')
const imagefileList = ref([])
const idCardPortraitImgAction = ref('/dev-api/common/upload')
const idCardPortraitImgfileList = ref([])
const idCardNationalEmblemImgAction = ref('/dev-api/common/upload')
const idCardNationalEmblemImgfileList = ref([])

const props = defineProps({
  applyFormInfo: {
    type: Object,
    default: () => {
      return {}
    }
  },
  type: {
    type: String,
    default: () => {
      return {}
    }
  }
})

watch(props, () => {
  formData.value = props.applyFormInfo;
}, {immediate: true})

//上传之前的文件判断
function imageBeforeUpload(file) {
  let isRightSize = file.size / 1024 / 1024 < 2
  if (!isRightSize) {
    ElMessage.error('文件大小超过 2MB')
  }
  return isRightSize
}

//上传之前的文件判断
function idCardPortraitImgBeforeUpload(file) {
  let isRightSize = file.size / 1024 / 1024 < 2
  if (!isRightSize) {
    ElMessage.error('文件大小超过 2MB')
  }
  return isRightSize
}

//上传之前的文件判断
function idCardNationalEmblemImgBeforeUpload(file) {
  let isRightSize = file.size / 1024 / 1024 < 2
  if (!isRightSize) {
    ElMessage.error('文件大小超过 2MB')
  }
  return isRightSize
}

//表单提交
function submitForm() {
  formRef.value.validate((valid) => {
    if (!valid) {
    }
    // TODO 提交表单
  })
}

//表单重置
function resetForm() {
  formRef.value.resetFields()
}

//上传文件成功
const handleSuccess = (res, key) => {
  formData.value[key] = res.url;
}
//移除文件
const handleRemove = (key) => {
  formData.value[key] = '';
}

const emit = defineEmits(['getFormData'])

watch(formData.value, (val) => {
  emit('getFormData', val)
}, {immediate: true})

defineExpose({
  rules
})

</script>
<style>
.el-upload__tip {
  line-height: 1.2;
}
</style>
<style src="../index.scss"></style>